<template>
  <div class="login">
    <div class="wraper">
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="user_name">
          <el-input v-model="ruleForm.user_name" autocomplete="off"> </el-input>
        </el-form-item>
        <el-form-item prop="user_pwd">
          <el-input
            type="password"
            v-model="ruleForm.user_pwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            style="width: 100%"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {userLogin,getUserInfo} from "../api/user"
import { mapMutations } from "vuex"
import { FilterRoutes } from '@/utils'
import Routes from '../router/auth'
export default {
  data() {
    // callback是执行下一步
    var validateUserName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的用户名"));
      }
      callback()
    };
    var validatePassWord = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码!"));
      } 
      callback();
    };
    var validatePassWord2 = (rule,value,callback)=>{
      if(value.length < 3) {
        callback(new Error('输入的密码请大于三位'))
      }
      callback()
    }
    return {
      ruleForm: {
        user_name: "",
        user_pwd: "",
      },
      // 匹配规则   
      rules: {
        user_name: [{ validator: validateUserName, trigger: "blur" }],
        user_pwd: [
          // 因为是数组可以写多组验证
          // validator验证器
          // trigger 经历什么事件触发 blur 失去焦点
          {
             validator: validatePassWord, trigger: "blur" 
          },
          {
            validator:validatePassWord2, trigger:"blur"
          }

        ],
      },
    };
  },
  methods: {
    ...mapMutations(["setRoutes"]),
    // 根据input里面的内容是否为空进行判断
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        
        // console.log(valid);
        // 1.调用登录接口
        // 2.获取用户信息
        if (valid) {
          userLogin(this.ruleForm).then(res=>{
            // 登录完成调用获取用户信息
            sessionStorage.setItem('token', res.token)
            getUserInfo().then(res =>{
              const text = res.data.identity_text;
              sessionStorage.setItem('text', text)
              sessionStorage.setItem('userInfo', JSON.stringify(res.data))
              // 参数  返回值  函数作用
              FilterRoutes(text, Routes)
              // console.log(res);
              // 根据用户身份来添加视图
              this.$router.addRoutes(Routes)
              // 后面会在home中使用，存到vuex中
              this.$router.push('/home')
              this.setRoutes({
                list:Routes
              })
            })
          })
        } else {
          this.$message.error('请输入正确密码')
          console.log(this.$message.error);
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.login {
  height: 100%;
  background-color: #000080;
  position: relative;
}

.wraper {
  position: absolute;
  right: 15%;
  top: 25%;
  box-sizing: border-box;
  width: 400px;
  padding: 40px 20px;
  border: 1px solid #ccc;
  background: #fff;
}
</style>